<template>
    <!-- 能源组合策略评估 -->
    <div class="strategy" @click="closePort">
        <div class="top-bar">
            <div class="title">港区自然资源能源化组合策略评估：</div>
            <div class="search-box flex-al-center">
                <div class="s-title">选定目标港区：</div>
                <div class="input pointer" @click.stop="openPort">
                    <input type="text" v-model="port" disabled  placeholder="请选择目标港区名称">
                    <div class="result" v-if="showPort">
                        <div class="r-li pointer" v-for="(item, index) in portList" :key="index" @click="getPort(item)">
                            {{ item }}
                        </div>
                    </div>
                    <img src="@/assets/arrow-down.png" :class="{ transform: showPort }" alt="">
                </div>
                <div class="input pointer" @click.stop="openCondition">
                    <input type="text" v-model="condition" disabled  placeholder="下拉选择目标评价条件">
                    <div class="result" v-if="showCondition">
                        <div class="r-li pointer" v-for="(item, index) in conditionList" :key="index"
                            @click="getCondition(item)">
                            {{ item }}
                        </div>
                    </div>
                    <img src="@/assets/arrow-down.png" :class="{ transform: showCondition }" alt="">
                </div>
                <div class="input pointer">
                    <input type="number" inputmode="numeric" v-model.trim="maxY" @change="changeYears" v-on:input="maxY = maxY.replace(/[^0-9]/g, '')" placeholder="请输入使用年限">
                </div>

                <div class="btn pointer" @click="outPut">输出组合策略最优解</div>
                <el-popover key="index1" :visible-arrow="false" popper-class="myClass"
                                            placement="bottom-end" width="200" trigger="click"
                                            content="能源组合策略计算使用默认值，如需使用详细值，请先使用港区自然资源能源化评估功能">
                                    <img class="pop-img" slot="reference" src="@/assets/wenhao.png" alt="">
                                </el-popover>
            </div>
        </div>

        <div class="box">
            <el-table :data="dataList" :highlight-current-row="true" row-class-name="rowClass" @row-click="rowClick"
                cell-class-name="cellClass" max-height="510" border header-row-class-name="headClass" stripe
                style="background-color: #172C69; border: 2px solid #2D57D2;">
                <el-table-column type="index" align="center" label="序号" width="193">
                </el-table-column>
                <el-table-column prop="type" align="center" label="区域类型" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.type" @change="getDevice(scope.row, scope.$index)">
                            <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="area" key="col1" align="center" label="长度" width="auto">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.length" type="number" key="input1"
                            @input="getDevice(scope.row, scope.$index)" placeholder="请输入长度"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="area" align="center" key="col2" label="宽度" width="auto">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.width" type="number" key="input2"
                            @input="getDevice(scope.row, scope.$index)" placeholder="请输入宽度"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="area" align="center" label="方圆2km内是否有高建筑物" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.have" @change="getDevice(scope.row, scope.$index)">
                            <el-option v-for="(item, index) in haveList" :key="index" :label="item" :value="item">
                            </el-option>
                        </el-select>

                    </template>
                </el-table-column>
                <el-table-column prop="whetherHasFan" align="center" label="安装设备" width="auto">
                    <template slot-scope="scope">
                        {{ scope.row.whetherHasFan }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="tools flex">
                <div class="btn" @click="addList">新增</div>
                <div class="btn" @click="delList">删除</div>
            </div>
        </div>

        <!-- <el-dialog :visible.sync="showOut" width="90%" :show-close="false">
            <lightCalc />
            
        </el-dialog> -->

    </div>
</template>

<script>
// import lightCalc from "@/components/lightCalc.vue"
export default {
    // components: {
    //     lightCalc
    // },
    data() {
        return {
            showPort: false,
            showCondition: false,
            showOut: false,
            port: "宁波舟山港",
            dataInfo: {},
            maxY: "",
            condition: "",
            typeList: ["空地", "建筑物", "其他"],
            haveList: ["没有高建筑物", "有高建筑物"],
            conditionList: ["发电量", "经济性", "碳排放", ],
            dataList: [
                {
                    type: "",
                    length: "",
                    width: "",
                    have: "",
                    whetherHasFan: "",
                    id: 0,
                },
            ],
            // portList: ["阳逻港", "青岛港", "天津港", "宁波舟山港"],
            portList: ["宁波舟山港"],
        }
    },
    created() {
        console.log(this.types)
    },
    methods: {
        changeYears() {
            this.$store.commit("changeYears", this.maxY)
            this.$store.commit("saveLight", { ...this.light, serviceLife: this.maxY })
            this.$store.commit("saveWind", { ...this.wind, useFixedNumberOfYear: this.maxY })

        },
        rowClass(row, index) {
            return row === this.dataInfo ? 'highlight-row' : '';
        },
        // 输出
        outPut() {

            // if (!this.light) {
            //     this.$message.warning("请先在港区自然资源能源化评估计算光伏发电")
            //     return
            // }
            if (this.dataList.length == 0) {
                this.$message.warning("请完善安装策略")
                return
            }
            if (!this.condition) {
                this.$message.warning("请选择评价条件")
                return
            }
            let idx = this.conditionList.findIndex(val => val == this.condition)
            this.$store.commit("condition", idx)
            console.log(this.types)
            let data = this.dataList.map(val => {
                return {
                    ...val,
                    whetherHasFan: val.whetherHasFan == "光伏组件" ? 0 : 1,
                }
            })
            this.$store.commit("outPut", data)
            this.$router.push("/outPut")
        },

        // 新增行
        addList() {
            if (this.dataList.length == 0) {
                this.dataList = [{
                    id: 0,
                    type: "",
                    length: "",
                    whetherHasFan: "",
                    width: "",
                    have: "",
                }]
            } else {
                this.dataList.unshift({
                    id: this.dataList[0].id + 1,
                    type: "",
                    length: "",
                    whetherHasFan: "",
                    width: "",
                    have: "",
                })
            }
        },

        // 删除行
        delList() {
            this.dataList = this.dataList.filter(val => val.id !== this.dataInfo.id)
            console.log(this.dataList)
        },

        // 输入框回调
        getDevice(row, index) {
            if ((row.type == "空地") && (row.have == "没有高建筑物") && (row.length > 540) && (row.width > 540)) {
                this.dataList[index].whetherHasFan = "光伏组件/风机"
            } else {
                this.dataList[index].whetherHasFan = "光伏组件"
            }
            this.$set(this.dataList, index, this.dataList[index])
            // console.log(row)

        },
        // 点击行
        rowClick(row) {
            console.log(row.id)
            this.dataInfo = row;
        },
        // 隐藏列表
        closePort() {
            this.showPort = false;
            this.showCondition = false;
        },
        openPort() {
            this.showPort = !this.showPort;
        },
        openCondition() {
            this.showCondition = !this.showCondition;
        },
        getPort(item) {
            this.port = item
        },
        getCondition(item) {
            this.condition = item
        },
    }
}
</script>

<style lang="scss" scoped>
.strategy {
    background-color: #000C38;
    height: 90.7vh;
    box-sizing: border-box;
    overflow: auto;
    padding: 27px;
}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 32px 35px;
}

.top-bar {
    padding: 27px;
    background: #172C69;
    border-radius: 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;
    }

    .search-box {
        .s-title {
            font-size: 27px;
            color: #E9EBF1;
        }

        .input {
            position: relative;
            border-radius: 5px;
            border: 3px solid #2D57D2;
            padding: 11px 11px 11px 16px;
            margin: 0 37px 0 0;
            border-radius: 5px;

            .result {
                padding: 11px;
                position: absolute;
                z-index: 1000;
                left: -3px;
                right: -3px;
                top: 56px;
                background: #2D57D2;
                box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                border-radius: 5px 5px 5px 5px;

                .r-li {
                    padding: 3px 11px;
                    margin: 0 0 8px 0;
                    font-size: 21px;
                    border-radius: 5px;

                    &:last-of-type {
                        margin: 0;
                    }

                    &:hover {
                        background: #173CA8;
                    }
                }
            }

            input {
                width: 240px;
                font-size: 21px;
                color: #FFFFFF;
                background-color: transparent;
            }
        }

        .btn {
            padding: 9.5px 37px 9px;
            background: #2D57D2;
            border-top: 3px solid #2D57D2;
            border-bottom: 3px solid #2D57D2;
            border-radius: 5px;
            font-size: 24px;
            line-height: 28px;
            color: #E9EBF1;
            margin-right: 20px;
            img{
                width: 60px;
            }
        }

        .border-r {
            border-radius: 5px;

        }
    }

}

.tools {
    justify-content: flex-end;
    margin: 20px 0 0 0;

    .btn {
        padding: 9.5px 47px 9px;
        background: #2D57D2;
        border-top: 3px solid #2D57D2;
        border-bottom: 3px solid #2D57D2;
        border-radius: 5px;
        font-size: 24px;
        line-height: 28px;
        color: #E9EBF1;
        margin-left: 20px;

        &:last-of-type {
            border: 3px solid #2D57D2;
            background: #172C69;
        }
    }
}

::v-deep .current-row {
    background: #4b73d1a7 !important;

}

::v-deep .el-dialog__body,
::v-deep .el-dialog__header {
    padding: 0 !important;
}

::v-deep .el-input__inner {
    border: none;
    color: #fff;
    font-size: 28px !important;
    background-color: transparent;
}

.pop-img{
   cursor: pointer;
}
</style>
  